 <template>
  <div class="main">
    <div>
      <button @click="state">防抖</button>
      <button @click="end">节流</button>
    </div>
    <!-- <img src="./img/1.jpg" v-watermark="watermarkText"> -->
    <div class="operate">
      <el-input
        class="inputCss"
        v-model="personName"
        placeholder="请输入姓名"
      ></el-input>
      <el-button icon="el-icon-search" type="primary" plain @click="init"
        >&nbsp;查询</el-button
      >
      <el-button
        icon="el-icon-refresh"
        type="primary"
        plain
        class="right"
        @click="refresh"
        >&nbsp;刷新</el-button
      >
      <el-button
        icon="el-icon-document-add"
        type="primary"
        class="right"
        plain
        @click="addData"
        >&nbsp;新增</el-button
      >
      <el-button
        icon="el-icon-edit"
        type="primary"
        class="right"
        plain
        @click="editData"
        >&nbsp;编辑</el-button
      >
    </div>
    <div class="table">
      <vxe-table
        show-overflow
        highlight-hover-row
        align="center"
        :data="tableDatas"
        border
        :height="heightY"
      >
        <vxe-column type="seq" width="60" />
        <vxe-column title="标题">
          <template slot-scope="scope">
            <span style="color: #409eff" @click="titleClick">{{
              scope.row.title
            }}</span>
          </template>
        </vxe-column>
        <vxe-column field="bumen" title="申请部门" width="400" />
        <vxe-column field="person" title="申请人" width="400" />
        <vxe-column field="srate" title="状态" width="400" />
      </vxe-table>
    </div>
    <searchApplyPop
      v-if="searchApplyPopFlag"
      ref="searchApplyPopRefs"
    ></searchApplyPop>
    <documentTitle
      v-if="documentTitleFlag"
      ref="documentTitleRefs"
    ></documentTitle>
  </div>
</template>

<script>
import searchApplyPop from "./searchApplyPop.vue";
import documentTitle from "./documentTitle.vue";
import myMixin from "./mixin混入.js";
export default {
  components: { searchApplyPop, documentTitle },
  mixins: [myMixin],
  data() {
    return {
      heightY: window.innerHeight - 200 + "px",
      timeId: "",
      timeName:"",
      watermarkText:"watermarkText",
      src:"https://img2.baidu.com/it/u=1330959003,1248282479&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780",
      tableDatas: [
        {
          title: "关于查阅张三等3人档案申请",
          bumen: "省委组织部",
          person: "王五",
          srate: "查看",
        },
      ],
      personName: "",
      searchApplyPopFlag: false,
      documentTitleFlag: false,
    };
  },
  mounted() {
    console.log(Function.prototype);
  },
  methods: {
    init() {},
    // 刷新
    refresh() {},
    // 编辑
    editData() {},
    //当用户触发state事件后，会清除上一次的延时器，并开启一个新的延时器，
    // 当用户停止操作一秒钟后，才会触发延时器中的方法，持续点击不会触发
    state() {
      clearTimeout(this.timeId);
      this.timeId = setTimeout(() => {
        //查询方法
        console.log(9999999);
      }, 5000);
    },
    end(){
      if (this.timeName) {
        return;
      } else {
      //如果不存在定时器则创建一个定时器，在多长时间后执行，执行完成后执行方法或逻辑并关闭该定时器。
      //然后不存在定时器，如此反复
        this.timeName = setTimeout(() => {
          console.log(88888);
          localStorage.setItem(this.lastTimeStoreId, new Date().getTime());
          clearTimeout(this.timeName);
          this.timeName = null;
        }, 5000);
      }
    },
    // 新增
    addData() {
      this.searchApplyPopFlag = true;
      this.$nextTick(() => {
        this.$refs.searchApplyPopRefs.init();
      });
    },
    //标题点击
    titleClick() {
      this.documentTitleFlag = true;
      this.$refs.documentTitleRefs.init();
    },
  },
};
</script>
<style scoped>
.main {
  width: 100%;
  height: calc(100% - 50px);
  background-color: #ffffff;
}
.operate {
  height: 8%;
  padding: 10px;
  /* display: flex; */
  align-items: center;
  justify-content: flex-end;
}
.table {
  height: 85vh;
}
.inputCss {
  float: left;
  margin-right: 10px;
  width: 300px;
}
.selectCss {
  float: left;
  margin-right: 10px;
}
.right {
  float: right;
}
</style>


<!-- 
<template>
  <div style="display: flex;justify-content: start;">
    <el-tree
      ref="tree"
      style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px"
      :data="treeData"
      node-key="id"
      :props="defaultProps"
      highlight-current
      @node-click="handleNodeClick"
      :current-node-key="currentNodekey"
    ></el-tree>
    <div class="thumbnail">
      <el-checkbox
        style="margin-left: 7px"
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <div class="image-container" v-for="(cityItem, index) in imageData" :key="index">
        <el-checkbox-group v-model="checkedImageIds" @change="handleCheckedCitiesChange">
          <el-checkbox :key="cityItem.elecId" :label="cityItem.elecId"></el-checkbox>
        </el-checkbox-group>
        <img style="width: 150px;height: 200px;" :src="cityItem.description" @click="selectImage(index)" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: "目录1",
          images: [
            { elecId: 1, description: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa44a4ec4-88eb-4c55-b8b3-cd9a57e7bdda%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708219509&t=66208574d09a49623bec9c07f8d0b74f" },
            { elecId: 2, description: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fda0be21c-dd45-4717-a4ca-ad38dd1ca9ca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708219509&t=d7b6a1969f732cdd59b88ca821c97098" },
            { elecId: 3, description: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5d1dcb3a-f442-4c11-bd5f-5eccf9801854%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708219509&t=c6e3f0bcdf987714361766e1e885e18c" },
          ],
        },
        {
          id: 2,
          label: "目录2",
          images: [
            { elecId: 4, description: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d8de0fd-c495-4faf-9429-3d05390a4200%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708219509&t=e47e98cd221ac05f8e45129dd3bbd6b6" },
            { elecId: 5, description: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F17286226-89ce-4f87-a6db-61f6e54da1d3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708219510&t=41df5cdf3d234b7d272ae41323ed7579" },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentNodekey: "",
      imageData: [],
      checkedImageIds: [],
      checkAll: false,
      isIndeterminate: false,
      val:false,
    };
  },
  methods: {
    handleNodeClick(data) {

      this.currentNodekey = data.id;
      this.imageData = data.images;
      console.log(this.imageData,"imageData")
      // this.handleCheckAllChange(true)
      if(this.val === false){
        console.log(123);
      }else{
        console.log(456);
        // this.checkedImageIds = data.images.map(item => item.elecId);
        this.checkedImageIds = this.imageData.map(item => item.elecId);
        console.log(this.checkedImageIds,"checkedImageIds")
      }
      // this.checkedImageIds = data.images.map(item => item.elecId);
    },
    handleCheckAllChange(val) {
      this.val = val;
      if (val) {
        this.checkedImageIds = this.imageData.map(item => item.elecId);
        this.isIndeterminate = false;
      } else {
        this.checkedImageIds = [];
      }
    },
    handleCheckedCitiesChange(value) {
      console.log(value,"value");
      const totalCities = this.imageData.map(item => item.elecId);
      if (value.length === totalCities.length) {
        this.checkAll = true;
        this.isIndeterminate = false;
      } else if (value.length > 0 && value.length < totalCities.length) {
        this.checkAll = false;
        this.isIndeterminate = true;
      } else {
        this.checkAll = false;
        this.isIndeterminate = false;
      }
    },
  },
};
</script> -->
